<template>
<el-dialog
    :model-value="dialogVisible"
    :title="dialogTitle"
    width="50%"
    @close="handleClose"
    
  >

    <el-form  ref="formRef" :model="form" label-width="200px" :rules="rules">
    <el-form-item label="会议主持人" prop="hostId">
      <!--<el-input v-model="form.hostId"></el-input> -->
      
      <el-select v-model="form.hostId" placeholder="请选择主持人">
                <el-option
                    v-for="item in options"
                    :key="item.userId"
                    :label="item.userId"
                    :value="item.userId">
                </el-option>
            </el-select>
    </el-form-item>
    <el-form-item label="会议日期" prop="meetingDate">
      <el-date-picker
        v-model="form.meetingDate"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
        type="date"
        placeholder="选择日期"
        :size="size"
      />
    </el-form-item>
    <el-form-item label="会议开始时间" prop="meetingStime">
      <el-time-picker v-model="form.meetingStime" placeholder="Arbitrary time" format="HH:mm:ss" value-format="HH:mm:ss" />
    </el-form-item>
    <el-form-item label="会议结束时间" prop="meetingEtime">
      <el-time-picker v-model="form.meetingEtime" placeholder="Arbitrary time" format="HH:mm:ss" value-format="HH:mm:ss"/>
    </el-form-item>
    <el-form-item label="会议参会人" prop="meetingPeople">
            <el-select v-model="form.meetingPeople" multiple placeholder="请选择参会人员">
                <el-option
                    v-for="item in options"
                    :key="item.userId"
                    :label="item.userId"
                    :value="item.userId">
                </el-option>
            </el-select>
          </el-form-item>
  </el-form>

          <el-form  id="RoomAndUserArea" ref="formRoomRef" :model="form" label-width="100px" :rules="roomrules" style="display:none">
          <el-form-item label="所用会议室" prop="meetingroomId">
            <el-select v-model="form.meetingroomId" placeholder="请选择会议室">
                <el-option
                    v-for="item in roomoptions"
                    :key="item.meetingroomId"
                    :label="item.meetingroomId"
                    :value="item.meetingroomId">
                </el-option>
            </el-select>
          </el-form-item>
          
        </el-form>
    <template #footer>
      <span class="dialog-footer">
            <el-button id="cancel" lable="取消" @click="goBack" >取消</el-button>
            <el-button id="confirm" type="primary" @click="handleConfirm">下一步</el-button>
          </span>
    </template>
  </el-dialog>
</template>

<script>
import { $userSearch } from '@/api/userapi';
import { $roomSearch } from '@/api/roomapi';
export default {
  data() {
    return {
        form:{
            code:'',
            name:''
        },
        value:'',
        options: [],
        roomoptions:[]
    }
  },
  created() {
     this.init();
     this.roominit();
  },
  methods:{
    async init(){
        const res = await $userSearch()
        console.log(res.data);
        res.data.forEach(element => {
          this.options.push({userId:element.userId});
        })
        console.log(this.options);
    },
    async roominit(){
        const res = await $roomSearch()
        console.log(res.data);
        res.data.forEach(element => {
          this.roomoptions.push({meetingroomId:element.meetingroomId});
        })
        console.log(this.options);
    }
  }
}

</script>

<script  setup>
import {defineEmits,ref,defineProps,watch} from 'vue';
import { $PartSearch,$meetingAdd, $meetingUpdate,$meetingPartSearch, $meetingPartSearchOnlyUserId,$MeetingRoomgetOkList} from '@/api/meetingapi'
import { ElMessage } from 'element-plus'


const props = defineProps({
  dialogTitle:{
    type:String,
    default:'',
    required:true
  },
  dialogTableValue:{
    type:Object,
    default:()=>{}
  }
})
const formRef=ref(null)
const formRoomRef=ref(null)

//const roomoptions = []

const selectPeople =ref([])

const form = ref({
  meetingId: "",
  meetingDate: "",
  meetingStime: "",
  meetingEtime: "",
  meetingroomId: "",
  hostId:"",
  meetingPeople:[],
})

const EtimeStime = (rule, value, callback) => {
  const test={...form.value}
  console.log(form.value)
  console.log(test)
  console.log(test.meetingStime)
  console.log(test.meetingEtime)
      if (test.meetingStime >= test.meetingEtime) {     
        callback(new Error("会议时间有问题"));
      } else {
        callback();
      }
}

watch (
  ()=>props.dialogTableValue,
  async()=>{
    
    form.value=props.dialogTableValue
    const updateForm={...form.value};

   
    const joinPeople=await $meetingPartSearchOnlyUserId(form.value)
    console.log(joinPeople.data)
    updateForm.meetingPeople=joinPeople.data
    console.log(updateForm)
    form.value=updateForm
    console.log(form.value)
  },
  {deep:true,immediate:true})

const emits =defineEmits(['update:model-value'],'initMeetingList')
const handleClose=()=>{
    emits('update:model-value',false)
}




const goBack=()=>{
  var bottoncancel =document.getElementById("cancel");
  if(bottoncancel.textContent === "取消"){
    //按钮为取消时，关闭弹窗
    handleClose()
  }else{
    //按钮为返回上一步
    bottoncancel.textContent = "取消"
    var bottoncomfirm =document.getElementById("confirm");
    bottoncomfirm.textContent = "下一步"
    var RoomAndUserform = document.getElementById("RoomAndUserArea");
    RoomAndUserform.style.display="none"
  }
  
}
const handleConfirm= ()=>{
    var bottoncomfirm =document.getElementById("confirm");
    if(bottoncomfirm.textContent === "下一步"){
      //按钮为下一步时，目前还缺少规则校验
      formRef.value.validate(async(valid)=>{
        if(valid){
          //修改按钮属性
          bottoncomfirm.textContent = "提交"
          var bottoncancel =document.getElementById("cancel");
          bottoncancel.textContent = "返回上一步"
          var RoomAndUserform = document.getElementById("RoomAndUserArea");
          RoomAndUserform.style.display="block"

          //动态加载会议室选项
          /*
          const roomSearch={...form.value};
          console.log(roomSearch,"dialog")
          var meetingroomSearchform=ref({
            
            meetingDate: roomSearch.meetingDate,
            meetingStime: roomSearch.meetingStime,
            meetingEtime: roomSearch.meetingEtime,       
          })
          console.log(meetingroomSearchform,"dialog")
           const formDate=new Proxy(meetingroomSearchform,{});
          console.log(formDate.value,"dialog")
          
            const roomdata=await $MeetingRoomgetOkList(formDate)
            console.log(roomdata);
            roomdata.data.forEach(element => {
            roomoptions.push({meetingroomId:element.meetingroomId});
            })
            console.log(roomoptions);

          */
          
          
          
        }else{
          alert("请输入正确的数据")
        }
      })
      
        
      
      
      
    }else{
      //按钮为提交时，目前还缺少规则校验
      
      console.log(form.value,"dialog")
      const test={...form.value};

      console.log(test,"dialog")
 
      //console.log(q,"dialog")
      //console.log(test,"dialog")
      //console.log(JSON.stringify(test),"dialog")
      //console.log(JSON.parse(JSON.stringify(test)),"dialog")

      //form.value=test //这句话要注意
      const formDate=new Proxy(test,{});
      console.log(form.value,"dialog")
      formRoomRef.value.validate(async(valid)=>{
        if(valid){
          if(props.dialogTitle==='添加会议'){
          
            console.log(formDate,"dialog")
            //const data=await $meetingAdd(form.value)
            const data=await $meetingAdd(formDate)
            console.log(data,"dialog")
            if(data.data=='新建会议成功'){
              ElMessage({
                message: '添加成功',
                type: 'success',
              })
            }else{
              ElMessage({
                message: '用户ID已存在',
                type: 'error',
              })
            }
          }else{
           
            console.log(form.value,"dialog")
            const data=await $meetingUpdate(formDate)
            console.log(data,"dialog")
            if(data.data=='修改会议成功'){
              ElMessage({
                message: '修改成功',
                type: 'success',
              })
            }else{
              ElMessage({
                message: '修改失败',
                type: 'error',
              })
            }
          }
          
          emits('initMeetingList')
          handleClose()
        }else{
          return false
        }
      })   
    }
    
}



const rules=ref({
    hostId:[
        {
            required:true,
            message:'请输入主持人id',
            trigger:'blur'
        }
    ],
    meetingDate:[
        {
            required:true,
            message:'请选择日期',
            trigger:'blur'
        }
    ],
    meetingStime:[
        {
            required:true,
            message:'请选择开始时间',
            trigger:'blur'
        }
    ],
    meetingEtime:[
        {
            required:true,
            message:'请选择结束时间',
            trigger:'blur'
        },
        { required: true, validator: EtimeStime, trigger: "blur" }
    ],
    meetingPeople:[
        {
            required:true,
            message:'请选择参会人员',
            trigger:'blur'
        }
    ], 
})

const roomrules=ref({
    meetingroomId:[
        {
            required:true,
            message:'请选择会议室ID',
            trigger:'blur'
        }
    ], 
})
</script>

<style lang="scss" scoped>

</style>